import { useEffect, useState } from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFileMedicalAlt, faTimes } from "@fortawesome/free-solid-svg-icons";
import useKeyPress from "@/hooks/useKeyPress";
import { useIpcRendererOn } from "@/hooks/useIpcRenderer";
import Types from "@/const/eventName";
import sty from "./index.module.scss";

const { ipcRenderer } = window.require("electron");

export default function FileList({
  fileList,
  activeFileId,
  onFileDel,
  onFileClick,
  onFileNameEdit,
}) {
  const [editId, setEditId] = useState(null);
  const [fileName, setFileName] = useState("");
  const enterPress = useKeyPress(13);

  const closeSearch = () => {
    setEditId(null);
  };
  const onFileEdit = (file) => {
    setEditId(file.id);
    setFileName(file.name);
  };

  const handleContextMenu = (file) => {
    ipcRenderer.send(Types.OPENCONTEXTMENU, file);
  };

  // 处理主进程菜单发过来的事件
  useIpcRendererOn({
    [Types.OPENFILE]: (_, file) => onFileClick(file),
    [Types.EDITFILE]: (_, file) => onFileEdit(file),
    [Types.DELETEFILE]: (_, file) => onFileDel(file),
  });

  useEffect(() => {
    const o = fileList.find((o) => o.isNew);
    if (o) {
      setFileName(o.name);
      setEditId(o.id);
    }
  }, [fileList]);

  useEffect(() => {
    if (editId && enterPress) {
      onFileNameEdit(editId, fileName);
      setEditId(null);
      setFileName("");
    }
  }, [enterPress, editId, fileName, onFileNameEdit]);

  return (
    <ul className="list-group">
      {fileList.map((f) => {
        const cls = classnames({
          "list-group-item pl-0 pr-0 pt-2": true,
          [sty.active]: f.id === activeFileId,
        });
        return (
          <li
            className={cls}
            key={f.id}
            onContextMenu={() => handleContextMenu(f)}
          >
            {editId === f.id || f.isNew ? (
              <div className="p-1 d-flex  justify-content-between align-items-center file-search">
                <input
                  type="text"
                  className="form-control"
                  value={fileName}
                  onChange={(e) => setFileName(e.target.value)}
                />
                <button
                  type="button"
                  className="icon-btn"
                  onClick={closeSearch}
                >
                  <FontAwesomeIcon icon={faTimes} title="取消" />
                </button>
              </div>
            ) : (
              <div className="row no-gutters">
                <div
                  className={`col-12 ${sty.leftTit}`}
                  onClick={() => onFileClick(f)}
                >
                  <FontAwesomeIcon icon={faFileMedicalAlt} />
                  <span className={sty.fileName}>{f.name}</span>
                </div>
              </div>
            )}
          </li>
        );
      })}
    </ul>
  );
}

FileList.propTypes = {
  activeFileId: PropTypes.string,
  fileList: PropTypes.array.isRequired,
  onFileDel: PropTypes.func.isRequired,
  onFileClick: PropTypes.func.isRequired,
  onFileNameEdit: PropTypes.func.isRequired,
};
